<template>
  <div class="collect">
    <div class="collect-header">
      <span class="iconfont" @click="back">&#xe612;</span>
      <div class='title'>我的收藏</div>
      <div class="right"></div>
    </div>
    <div class="collect-con">
      <div class="collect-con-title">
        <div class="collect-top"
          v-for='(list, index) of title'
          :key="index"
          @click="btnChange(index)">
          <p :class="{active:index==indexColl}">{{list.name}}</p>
        </div>
      </div>
      <div class="collect-con-more">
        <div v-show="indexColl == 0">
          <div class="collect-con-1">
            这是第一个页面
          </div>
        </div>
        <div v-show="indexColl == 1">
          <div class="collect-con-2">
            <h4>VIVO X21全面屏手机五大个热门问题详解,关于VIVO详情</h4>
            <p class="collect-text">X21给人的第一感觉是比X20更加惊艳的，6.28英寸的大屏幕，19:9的屏幕比例，屏占比达到了90.3%，全面屏视野比X20更加广阔</p>
            <div class="collect-bom">
              <p class="collect-collect">
                收藏时间:
                <span class="collect-time">2019-07-11 17:35</span>
                <i class="iconfont collect-icon">&#xe6d0;</i>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      indexColl: 0,
      title: [{
        name: '商品'
      },{
        name: '文章'
      }]
    }
  },
  methods: {
    // 返回
    back: function(){
      this.$router.go(-1)
    },
    // 实现切换功能
    btnChange(index){
      this.indexColl = index
    }
  },

}
</script>

<style lang="less">
  .collect{
    .collect-header{
      position: fixed;
      top: 0;
      z-index: 2;
      background: white;
      width: 100%;
      height: 1.5rem;
      color: #777;
      border-bottom: 1px solid #eee;
      span{
        width: 10%;
        float: left;
        height: 1.5rem;
        line-height: 1.5rem;
        font-size: .8rem;
        text-align: center;
      }
      .title{
        width: 80%;
        float: left;
        line-height: 1.5rem;
        text-align: center;
        margin: 0 auto;
        font-size: .5rem;
      }
      .right{
        float: left;
        width: 10%;
        line-height: 1rem;
      }
    }
    .collect-con{
      padding-top: 1.5rem;
      .collect-con-title{
          width: 100%;
          display: flex;
          border-bottom: 1px solid #eee;
          .collect-top{
            flex: 1;
            width: 50%;
            height: 1rem;
            background: white;
            p{
              margin: 0 auto;
              line-height: .9rem;
              width: .9rem;
              text-align: center;
              font-size: .36rem;
            }
            .active{
               border-bottom: .0625rem solid #199CFE;
               color: #199CFE;
            }
          }
        }
      }
      .collect-con-more{
        width: 100%;
        background: white;
        border-bottom: 1px solid #eee;
        .collect-con-2{
          width: 90%;
          margin: 0 auto;
          padding-top: .23rem;
          padding-bottom: .15rem;
          h4{
            font-size: .5rem;
            font-weight: 600;
            line-height: .6rem;
            // 实现多行转成一行，并实现三个点
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .collect-text{
            font-size: 0.36rem;
            line-height: 0.5rem;
            text-indent: 2em;
            padding-top: .2rem;
          }
          .collect-bom{
            width: 100%;
            .collect-collect{
              font-size: .4rem;
              line-height: 1rem;
              .collect-time{
                color: red;
                margin-left: .1rem;
              }
              .collect-icon{
                display: block;
                float: right;
                font-size: .5rem;
                color: #999;
              }
            }
          }
        }
      }
  }
</style>
